<script setup>
	import { onUnmounted, ref, computed } from 'vue';
	import { useUserStore } from '@/store/userInfo';

	// 导入用户store
	const userStore = useUserStore( )

	// 使用计算属性来过滤功能列表
	const gnData = computed( ( ) => {
		const baseData = [
			// { name: 'yuan-shangjia-01', value: '商户加盟' },
			{ name: 'yuan-lianxiwomen', value: '客服咨询', isContact: true },
			{ name: 'yuan-shezhi-01', value: '个人设置' }
		]

		// 如果是管理员，添加后台管理功能
		if ( userStore.userInfo.role?.[ 0 ] === 'admin' ) {
			baseData.push( { name: 'yuan-Frame', value: '后台管理' } )
		}

		return baseData
	} )

	// 检查登录状态
	const checkLogin = ( ) => {
		if ( !userStore.userInfo.uid ) {
			uni.showToast( {
				title: '请先登录',
				icon: 'none'
			} )
			setTimeout( ( ) => {
				uni.reLaunch( {
					url: '/pages/login/login'
				} )
			}, 1500 )
			return false
		}
		return true
	}

	// 点击功能区
	const handleItem = ( value ) => {
		switch ( value ) {
			// case '商户加盟':
			// 	uni.navigateTo( {
			// 		url: '/subPackages/merchantJoin/merchantJoin'
			// 	} )
			// 	break;
			case '个人设置':
				if ( checkLogin( ) ) {
					uni.navigateTo( {
						url: '/subPackages/userOptions/userOptions'
					} )
				}
				break;
			case '后台管理':
				if ( checkLogin( ) ) {
					uni.navigateTo( {
						url: '/subPackages/managementAdmin/managementAdmin'
					} )
				}
				break;
		}
	}

	// 退出登录提示
	let time
	const loginOutToast = ( ) => {
		time = setTimeout( ( ) => {
			uni.showToast( {
				icon: "success",
				title: "退出登录"
			} )
		}, 500 )
	}

	// 清除定时器
	onUnmounted( ( ) => {
		clearTimeout( time )
	} )
</script>
<template>
	<view class="changyong">
		<view class="content">
			<view class="head-title">
				常用功能
			</view>
			<!-- 常用功能 -->
			<view class="item-box" v-for="(item,index) in gnData" :key="index">
				<button v-if="item.isContact" class="contact-btn" @tap="checkLogin()"
					:open-type="userStore.userInfo.uid ? 'contact' : ''">
					<view class="left">
						<view class="icon">
							<uni-icons custom-prefix="iconfont" color="#969696" :size="20"
								:type="item.name"></uni-icons>
						</view>
						<view class="value">
							{{item.value}}
						</view>
					</view>
					<view class="jiantou">
						<uni-icons custom-prefix="iconfont" color="#969696" :size="20"
							type="yuan-a-ArrowRight2"></uni-icons>
					</view>
				</button>
				<view v-else class="normal-item" @tap="handleItem(item.value)">
					<view class="left">
						<view class="icon">
							<uni-icons custom-prefix="iconfont" color="#969696" :size="20"
								:type="item.name"></uni-icons>
						</view>
						<view class="value">
							{{item.value}}
						</view>
					</view>
					<view class="jiantou">
						<uni-icons custom-prefix="iconfont" color="#969696" :size="20"
							type="yuan-a-ArrowRight2"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<style lang="scss" scoped>
	/*页面内容*/
	.changyong {
		padding: 0 24rpx;

		.content {
			padding: 24rpx;
			background-color: #fff;
			border-radius: 24rpx;

			.head-title {
				font-weight: bold;
				color: $text-font-color-2;
			}

			.item-box {
				margin-top: 16rpx;
				border-bottom: 1px solid $text-font-color-4;

				&:last-child {
					border: none;
				}

				// 客服按钮样式
				.contact-btn {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 16rpx;
					background-color: transparent;
					border: none;
					text-align: left;
					line-height: normal;

					&::after {
						border: none;
					}
				}

				// 普通项目样式
				.normal-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 16rpx;
				}

				.left {
					display: flex;
					align-items: flex-start;

					.icon {
						padding-top: 2rpx;
					}

					.value {
						margin-left: 8rpx;
						font-size: 28rpx;
						color: $text-font-color-2;
					}
				}

				.jiantou {}
			}
		}
	}
</style>